<template>
  <!-- 财报转换页面 -->
  <div style="width: 100%;">
    <!-- 顶部导航栏 -->
    <div class="topNavigationBar">
      <div class="Back" @click="() => { router.push('/submissionOfFinancialStatementsIndex') }">
        <el-icon>
          <Back />
        </el-icon>
        返回
      </div>

      <div class="Breadcrumb">
        <!-- 面包屑组件封装 -->
        <Breadcrumb :showwhat="[{ id: 1, title: '首页', url: '/', disabled: false },
        { id: 2, title: '财务报表报送及更正', url: '/submissionAndCorrectionOfFinancialStatements' }]">
        </Breadcrumb>
      </div>
    </div>


    <div class="submissionAndCorrectionOfFinancialStatementsToBeSubmitted">
      <!-- 报送所属期  -->
      <div class="topBox">
        <div class="title1">报送所属期 </div>
        <div class="title2">
          {{ dateRange.title }}
        </div>
        <div class="title3">
          ( {{ dateRange.startDate }} 至 {{ dateRange.endDate }} )
        </div>

        <div class="title4">
          报送资料种类:
        </div>

        <div class="title3">
          {{ '财务报表报送与信息采集(小企业会计准则)' }}
        </div>
      </div>

      <hr
        style="border: 1px solid #e9e9e9;border-radius: 1px;margin: 18px 0 18px 0; width: calc(100% + 4%);margin-left: -2%;">

      <div class="title5">
        财报转换
      </div>

      <div class="tip2">
        上传的文件支持单文件、多文件上传，单文件的SHEET页名称需要按:【资产负债表，利润表，现金流量表】命名。
      </div>

      <div class="selectTheFile">
        <div class="file-tip-btn">
          <el-button @click="clickUpload">
            选择文件
          </el-button>
          <div class="tip">
            支持批批量传，上传格式为xls、xlsx文件
          </div>
        </div>
      </div>

      <div class="chooseFiles" ref="dragRef" v-show="!isShowResultOfTheFileUploadStatus">
        点击上方“选择文件”或将文件拖拽到此区域
      </div>

      <!-- 文件上传状态结果 -->
      <div class="custom-table" v-show="isShowResultOfTheFileUploadStatus">
        <!-- 第一行（表头） -->
        <div class="table-row header">
          <div class="table-cell">文件名</div>
          <div class="table-cell">文件大小</div>
          <div class="table-cell">状态</div>
          <div class="table-cell">操作</div>
        </div>

        <!-- 第二行（数据行） -->
        <div class="table-row" v-for="(item, index) in selectFiles" :key="index">
          <div class="table-cell">{{ item?.name }}</div>
          <div class="table-cell">{{ formatFileSize(item?.size) }}</div>
          <div class="table-cell">
            <div v-show="item.isUploadSuccess" style="display: flex;align-items: center;">
              <el-icon :color="'#00a870'" :size="16">
                <SuccessFilled />
              </el-icon>
              上传成功
            </div>
            <div v-show="!item.isUploadSuccess" style="display: flex;align-items: center;"><el-icon :size="16"
                :color="'#e34d59'">
                <WarningFilled />
              </el-icon>上传失败</div>
          </div>
          <div class="table-cell" style="cursor: pointer;color: #0099ff;" @click="delFile(item?.lastModified)">删除</div>
        </div>
      </div>

      <div class="previous">
        <el-button type="primary" @click="() => { router.push('/submissionOfFinancialStatementsIndex') }">
          上一步
        </el-button>
        <el-button type="primary" :disabled="isImportTheReportDisabled" @click="importTheReport()">
          导入报表
        </el-button>
      </div>

    </div>
    <!-- 上传失败对话框 -->
    <el-dialog v-model="dialogVisible" title="对话框" width="500" draggable overflow>
      <!-- 这里是自定义标题栏 -->
      <template #header="{ close, titleId, titleClass }">
        <div :id="titleId" :class="titleClass" style="display: flex;align-items: center;gap: 2%;">
          <el-icon :size="22" :color="'#e34d59'">
            <WarningFilled />
          </el-icon>
          <div style="font-weight: 500;">
            提示
          </div>
        </div>
      </template>
      <!-- 这里是内容 -->
      <div>
        文件“财务报表报送与信息采集(小企业会计准则)年报.xs”上传失败:您上传的文件模板不符合要求，最新的财报导入模板请点击右上角的“下载模板”下载。
      </div>
      <!-- 这里是自定义底部确认取消栏 -->
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button @click="dialogVisible = false">取消</el-button> -->
          <el-button type="primary" @click="dialogVisible = false">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { formatFileSize } from '@/utils/formatFileSize';
import Breadcrumb from '@/components/Breadcrumb/index.vue';
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { createUploader } from '@/utils/uploadHelper2.js'

import { globalStore } from '@/stores/global.js'
import { storeToRefs } from 'pinia'
const { dataList, dateRange } = storeToRefs(globalStore())
console.log('dataList.value:', dataList.value);
console.log('dateRange.value:', dateRange.value);

const router = useRouter()

//导入报表是否禁用
const isImportTheReportDisabled = ref(true)

//每一次要选择上传的文件
const selectFiles = ref([])

//是否显示文件上传结果状态表格
const isShowResultOfTheFileUploadStatus = ref(false)

//是否显示失败上传对话框
const dialogVisible = ref(false)

//拖拽上传组件
const dragRef = ref(null)
let uploader = null
const initUploader = () => {
  // 只创建 uploader，不触发选择框
  uploader = createUploader({
    onlyGetInputFiles: true,//可选，默认false，如果为true则只获取选中文件列表
    uploadApi: '/uploadFile',// 可选，不传默认使用 api.uploadFile 
    inputAccept: '.xlsx,.xls', // 可选，默认为所有文件类型
    multiple: true, // 可选
    onGetInputFiles: (files) => {
      console.log('onGetInputFiles文件列表:', files);
      if (files.length > 0) {
        //导入报表按钮解除禁用
        isImportTheReportDisabled.value = false
        selectFiles.value.push(...files)
      }
    },
    onUploadResult: (res, files) => {
      console.log('onUploadResult上传结果:', res)
      console.log('onUploadResult文件列表:', files);
      // if (files.length > 0) {
      //   isImportTheReportDisabled.value = false
      //    selectFiles.value.push(...files)
      // }
      // if (res.code == 200) {
      //    
      // } else {
      //    
      // }
    },
  })
  // 方法2：通过绑定拖拽区域来上传
  // 绑定拖拽区域（只绑定监听，不弹窗）
  uploader.bindDragDropArea(dragRef.value)
}
// 点击上传按钮：👉 点击按钮后才弹出文件选择
const clickUpload = () => {
  // 方法1:通过按钮来触发文件弹窗选择文件上传
  uploader.triggerSelectFile()
}

//导入报表按钮
const importTheReport = () => {
  console.log('导入报表');
  console.log('selectFiles.value:', selectFiles.value);

  //在这里发送selectFiles.value到后端 模拟网络请求
  if (true) {
    //显示文件上传结果状态表格
    isShowResultOfTheFileUploadStatus.value = true

    //上传成功的文件将selectFiles.value的item 的isUploadSuccess=true
    //模拟，比如第一个文件成功上传了，其他的失败
    if (selectFiles.value.length > 0) {
      selectFiles.value[0].isUploadSuccess = true
    }

  } else {
    //显示文件上传结果状态表格
    isShowResultOfTheFileUploadStatus.value = true

    dialogVisible.value = true


  }
}

//删除文件按钮
const delFile = (lastModified) => {
  console.log('就拿每一个文件的最后修改时间的时间戳为文件id吧lastModified：', lastModified);
  //根据lastModified删除文件
  selectFiles.value = selectFiles.value.filter(item => item.lastModified !== lastModified)
  if (selectFiles.value.length === 0) {
    //隐藏文件上传结果状态表格
    isShowResultOfTheFileUploadStatus.value = false
    //禁用上传报表按钮
    isImportTheReportDisabled.value = true
  }
}
onMounted(() => {
  //初始化上传组件
  initUploader()
})

</script>

<style scoped lang="scss">
.topNavigationBar {
  padding: 10px;
  background-color: #fff;
  /* 20px 左 + 20px 右 还要减去自己的padd造成的加宽了20px*/
  width: calc(100% + 40px - 20px);
  //想要和父亲宽相等，解决父亲padding的问题，父亲的padd是20px,那就往左上角移动20px
  transform: translate(-20px, -20px);
  display: flex;
  align-items: center;

  .Back {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b563f;
    font-size: larger;
    cursor: pointer;
    margin-left: 4%;
  }

  .Breadcrumb {
    margin-left: 2%;
    margin-bottom: -4px;
  }
}

.submissionAndCorrectionOfFinancialStatementsToBeSubmitted {
  width: 90%;
  margin: auto;
  padding: 2%;
  border-radius: 5px;
  background-color: #fff;

  .topBox {
    display: flex;

    .title1 {
      font-size: large;
      font-weight: 500;
    }

    .title2 {
      font-size: large;
      font-weight: 500;
      color: #ff9900;
      margin-left: 1%;
    }

    .title3 {
      color: #7a7a7a;
      margin-left: 1%;
    }

    .title4 {
      font-weight: 500;
      margin-left: 3%;
    }

  }

  .title5 {
    font-size: 20px;
    font-weight: 500;
  }

  .tip2 {
    padding: 1%;
    color: #36383a;
    background-color: #f9fafd;
    margin-top: 1%;
    margin-bottom: 1%;
    border-radius: 6px;
  }

  .selectTheFile {
    margin: 20px 0 20px 0;

    .file-tip-btn {
      display: flex;
      align-items: center;
      gap: 14px;

      .tip {
        font-size: small;
        color: #7a7a7a;
      }
    }

  }

  .chooseFiles {
    border: 1px dashed #ccc;
    height: 200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7a7a7a;
  }

  .previous {
    display: flex;
    justify-content: center;
    margin-top: 2%;
    margin-bottom: 6%;
  }
}

.custom-table {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #dcdfe6;
}

.table-row:last-child {
  border-bottom: none;
}

.table-cell {
  flex: 1;
  padding: 12px 16px;
  border-right: 1px solid #dcdfe6;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.table-cell:last-child {
  border-right: none;
}

.header {
  // background-color: #f5f7fa;
  font-weight: bold;
  color: #7a7a7a;
}
</style>